<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		article {
			margin-top: 20px;
		}
		#one {
			width: 500px;
			height: 500px;
			border: 1px solid red;
			display: grid;
			grid-template-columns: 50% 50%;
			grid-template-rows: 20% 20% 20% 20% 20% ;
		}
		#two {
			width: 500px;
			height: 200px;
			border: 1px solid red;
			display: grid;
			/* 
			grid-template-columns: 100px 100px 100px 100px 100px;
			grid-template-rows: 100px 100px;
			*/
			/*
			grid-template-columns: repeat(5, 20%);
			grid-template-rows: repeat(2, 50%);
			*/
			/*
			grid-template-columns: repeat(5, 100px);
			grid-template-rows: repeat(2, 100px);
			*/
			
			grid-template-columns: repeat(5, 1fr);
			grid-template-rows: repeat(2, 1fr);
			
		}
		/* 
		grid-template-columns：设置列数 空格分隔  代表每一个单元格的宽度
		grid-template-rows： 设置行数 空格分隔  代表每一个单元格的高度 
		二者既可以使用px给出具体的尺寸
		也可以使用百分比

		也可以使用repeat关键字 repeat(num, width)
		第一个参数是重复次数  
		后边参数不是一个  可以写多个  写两个  就会将这两个数重复两遍   等于四个数


		相对来说  使用百分比要更简单一些

		fr ———— 份数   类似于flex布局中的   flex:1  flex:2 等
		*/
		#three {
			width: 500px;
			height: 200px;
			border: 1px solid red;
			display: grid;
			grid-template-columns: 20% 20% 20% 20% 20%;
			grid-template-rows: 50% 50%;
		}

		div {
			border: 1px solid green;
			background: blueviolet;
			background-clip: content-box;
			padding: 5px;
			box-sizing: border-box;
		}
	</style>
</head>

<body>
	<article id="one">
		<div>1</div>
		<div>2</div>
		<div>3</div>
		<div>4</div>
		<div>5</div>
		<div>6</div>
		<div>7</div>
		<div>8</div>
		<div>9</div>
		<div>10</div>
	</article>
	<!--  -->
	<article id="two">
		<div>1</div>
		<div>2</div>
		<div>3</div>
		<div>4</div>
		<div>5</div>
		<div>6</div>
		<div>7</div>
		<div>8</div>
		<div>9</div>
		<div>10</div>
	</article>
	<article id="three">
		<div>1</div>
		<div>2</div>
		<div>3</div>
		<div>4</div>
		<div>5</div>
		<div>6</div>
		<div>7</div>
		<div>8</div>
		<div>9</div>
		<div>10</div>
	</article>
</body>

</html>